<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">

  <div>
    <el-row class="params">
      <label class="row-lable">商品编号:</label>
      <el-input style="width:160px" v-model="itemCode"></el-input>
      <label class="row-lable">商品标题:</label>
      <el-input style="width:160px" v-model="title"></el-input>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-date-picker
        v-model="timeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>

      <el-button type="primary" @click="jump(1)">搜索</el-button>
    </el-row>
    <el-row>
      <el-button type="primary" @click="goCreate(true)">创建商品(本地图片)</el-button>
      <el-button type="primary" @click="goCreate(false)">创建商品(图片链接)</el-button>
      <el-button type="primary" @click="othgerCreate()">快捷发布商品</el-button>
      <el-button type="primary" @click="openDaifaInfo()">商品代发数据查询</el-button>

    </el-row>
    <el-table :data="listData" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column prop="itemCode" label="商品编号"></el-table-column>
      <el-table-column prop="title" label="商品标题"></el-table-column>
      <el-table-column prop="discount" label="商品价格"></el-table-column>
      <el-table-column prop="cateName" label="所属类目"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>

      <el-table-column label="首页展示图">
        <template slot-scope="scope">
          <template v-if="scope.row.advertImg">
            <template v-for="item in scope.row.advertImg">
              <img :src="item" style="margin-left: 20px;max-height: 60px;max-width: 60px">
            </template>
          </template>
          <el-button type="text" @click="modAdvertImg(scope.row)">更换广告图</el-button>
        </template>
      </el-table-column>
      <el-table-column label="分享链接">
        <!--todo 链接写死了，token是因为后台的开发维护账号token是kfwh-->
        <template slot-scope="scope">
          <span style="color: #66b1ff;text-decoration: underline;cursor:pointer"
                v-clipboard:copy="'https://xcxmall.20lz.com/share/mallDetails?itemId='+scope.row.itemId+'&token=kfwh'"
                v-clipboard:success="onCopy">复制</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goModGoods(scope.row)">修改商品信息(上传图片)</el-button>
          <br>
          <el-button type="text" size="small" @click="goModGoodsByLink(scope.row)">修改商品信息(修改链接)</el-button>
          <br>
          <el-button type="text" size="small" @click="openOne(scope.row)" v-if="scope.row.onsale">下架商品</el-button>
          <el-button type="text" size="small" @click="openUp(scope.row)" v-if="!scope.row.onsale">上架商品</el-button>
          <br>
          <el-button type="text" size="small" @click="open(scope.row)">删除商品</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      @current-change="jump"
      layout="total, prev, pager, next, jumper"
      :pageSize=15
      :total="total">
    </el-pagination>

    <!--修改广告图-->
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="show" width="50%">
      <el-form>
        <el-form-item>
          <lazy-img-upload @onSuccess="upOne"
                           beforeClass="afterUpload"
                           afterClass="afterUpload"
                           quality="50"
                           resize-width="355"
                           :background-img="imgData[0] === undefined? backImg:imgData[0]">
          </lazy-img-upload>
        </el-form-item>
        <el-form-item>
          <lazy-img-upload @onSuccess="upTwo"
                           beforeClass="afterUpload"
                           afterClass="afterUpload"
                           quality="50"
                           resize-width="355"
                           :background-img="imgData[1] === undefined? backImg:imgData[1]">
          </lazy-img-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="show=false">取 消</el-button>
         <el-button type="primary" @click="doModAdvert">确 定</el-button>
       </span>
    </el-dialog>

    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="daifaShow" class="store_daifa" title="商品代发数据">
      <el-row>
        <span style="font-size: 15px;font-weight: 700">星座网商品id：</span>
        <el-input placeholder="" v-model="daifaSearch.itemCode" style="width: 150px"></el-input>
        <el-button @click="getDaifaInfo()">查询</el-button>
      </el-row>
      <el-row class="daifa_row" v-if="showInfo">
        <span style="font-size: 16px;font-weight: 900;">商品信息</span>
        <br>
        <el-form>
          <el-form-item label="上架时间：">
            {{daifaInfo.listTime}}
          </el-form-item>
          <el-form-item label="总订单数量：">
            {{daifaInfo.totalSale}} 件
          </el-form-item>
          <el-form-item label="正常发货数量：">
            {{daifaInfo.totalOrder}} 件
          </el-form-item>
          <el-form-item label="缺货次数：">
            {{daifaInfo.noGoodsTime}} 次
          </el-form-item>
        </el-form>
      </el-row>
      <el-row class="store_row" v-if="showInfo">
        <span style="font-size: 16px;font-weight: 900;">店铺信息</span>
        <br>
        <el-form>
          <el-form-item label="档口号：">
            {{storeInfo.storeNum}}
          </el-form-item>
          <el-form-item label="是否支持代发：">
            {{storeInfo.daifaCooperation === 1?"支持":"不支持"}}
          </el-form-item>
          <el-form-item label="近三个月总销量：">
            {{storeInfo.soldNumThree}} 件
          </el-form-item>
          <el-form-item label="正常发货数量：">
            {{storeInfo.totalOrder}} 件
          </el-form-item>
          <el-form-item label="近三个月缺货量：">
            {{storeInfo.noGoodsNumThree}} 次
          </el-form-item>
          <el-form-item label="近三个月缺货比例：">
            {{storeInfo.noGoodsPerThree}} %
          </el-form-item>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer" v-if="daifaSearch.itemCode!==''&&daifaSearch.itemCode!==undefined">
         <el-button @click="closeDaifa()">关闭</el-button>
         <el-button type="primary" @click="othgerCreate">去发布</el-button>
       </span>
    </el-dialog>
  </div>

</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {
    ajax,
    allitemList,
    deleteItem,
    noSaleItem,
    modifyItemAdvert,
    saleItem,
    getItemDaifaInfo
  } from "../../data/service";

  export default {
    name: "mallList",
    data() {
      return {
        showInfo: false,
        listData: [],
        options: [{
          value: 1,
          label: '全部'
        }, {
          value: 2,
          label: '上架'
        }, {
          value: 3,
          label: '下架'
        }],
        value: 1,
        timeRange: '',
        total: 0,
        page: 1,
        itemCode: '',
        title: '',
        modImg: false,
        advertId: '',
        imgData: [],
        itemId: '',
        show: false,
        backImg: require('../../assets/scImg1.png'),
        daifaSearch: {
          itemCode: '',
        },
        daifaShow: false,//代发信息查询
        daifaInfo: {
          listTime: "",
          totalSale: "",
          noGoodsTime: "",
          totalOrder: "",
        },
        storeInfo: {
          storeNum: "",
          daifaCooperation: "",//是否合作代发 1是 0不是
          shopStatus: "",
          soldNumThree: "",
          noGoodsNumThree: "",
          noGoodsPerThree: "",
          totalOrder: "",
        },
      }
    },
    created() {
      this.getList()
    },
    mixins: [ajax],
    methods: {

      getList() {
        let before, after;
        if (this.timeRange) {
          before = this.timeRange[0];
          after = this.timeRange[1];
        }

        this.doajax(allitemList, {
          page: this.page,
          itemCode: this.itemCode,
          status: this.value === undefined ? 1 : this.value,
          before: before === undefined ? "" : before,
          after: after === undefined ? "" : after,
          title: this.title === undefined ? "" : this.title
        }, (resp) => {
          this.listData = resp.data;
          this.total = resp.total;
        })
      },

      open(row) {
        this.$confirm('确定删除吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          let itemId = row.itemId;
          this.doajax(deleteItem, {itemId: itemId}, (resp) => {
            this.getList();
            this.success("删除成功")
          })
        }).catch(() => {

        });
      },

      openOne(row) {
        this.$confirm('确定下架吗?', '下架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          let itemId = row.itemId;
          this.doajax(noSaleItem, {itemId: itemId}, (resp) => {
            this.getList();
            this.success("下架成功")
          })
        }).catch(() => {

        });
      },
      goCreate(flag){
        if (flag) {
          this.$router.push("/admin/mallCreate");
        } else {
          this.$router.push("/admin/mallCreateByLink");
        }
      },
      othgerCreate(){
        this.$router.push("/admin/goodsFromOther/" + this.daifaSearch.itemCode);
      },
      openDaifaInfo(){
        this.daifaShow = true;
      },
      getDaifaInfo(){
        this.doajax(getItemDaifaInfo, this.daifaSearch, resp=> {
          this.daifaInfo = resp.daifaInfo;
          this.storeInfo = resp.storeInfo;
          this.showInfo = true;
        });
      },
      openUp(row) {
        this.$confirm('是否上架?', '上架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          let itemId = row.itemId;
          this.doajax(saleItem, {itemId: itemId}, (resp) => {
            this.getList();
            this.success("上架成功")
          })
        }).catch(() => {

        });
      },

      goModGoods(row) {
        let itemId = row.itemId;
        this.$router.push('/admin/mallModList/' + itemId);
      },
      goModGoodsByLink(row) {
        let itemId = row.itemId;
        this.$router.push('/admin/mallModByLink/' + itemId);
      },
      onCopy() {
        this.success("复制成功");
      },
      modAdvertImg(row) {
        this.itemId = row.itemId;
        this.imgData = row.advertImg === undefined ? [] : row.advertImg;
        this.show = true;
      },
      doModAdvert() {
        this.doajax(modifyItemAdvert,
          {
            itemId: this.itemId,
            imgUrl: this.imgData.join(",")
          },
          resp => {
            this.imgData = [];
            this.getList();
            this.show = false;
          });
      },
      upOne(val) {
        this.imgData[0] = val;
      },
      upTwo(val) {
        this.imgData[1] = val;
      },
      jump(val) {
        this.page = val;
        this.getList();
      },
      init(){
        this.daifaInfo = {
          listTime: "",
          totalSale: "",
          noGoodsTime: "",
          totalOrder: "",
        };
        this.storeInfo = {
          storeNum: "",
          daifaCooperation: "",//是否合作代发 1是 0不是
          shopStatus: "",
          soldNumThree: "",
          noGoodsNumThree: "",
          noGoodsPerThree: "",
          totalOrder: "",
        };
        this.daifaSearch.itemCode = '';
      },
      closeDaifa(){
        this.init();
        this.daifaShow = false;
        this.showInfo = false;
      }
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .ADModImg > .afterUpload > img {
    width: 100px;
    height: 100px;
    padding-left: 40%;
  }

  .afterUpload > img {
    width: 80px !important;
    height: 80px !important;
  }

  .el-select > .el-input {
    width: 150px;
    margin: 10px 0;
  }

  .el-select .el-input__inner {
    width: 150px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  }

  .daifa_row {
    margin-top: 20px;
  }

  .store_row {
    margin-top: 20px;
  }

  .daifa_row .el-form-item {
    margin-bottom: 0 !important;
  }

  .store_row .el-form-item {
    margin-bottom: 0 !important;
  }

  .store_daifa .el-dialog {
    width: 30%;
  }

  .store_daifa .el-dialog__body {
    padding-left: 60px !important;
  }

  .store_daifa .el-dialog__header {
    text-align: center;
  }

  .store_daifa .el-dialog__header .el-dialog__title {
    font-weight: 700;
    font-size: 20px;
  }
</style>
